<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="props.formOperate !=='view'?['refresh', 'add', 'edit', 'delete','comSearch', 'quickSearch', 'columnDisplay']:[]"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('aREA.quick Search Fields') })"
        />


        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted , computed } from 'vue'
import baTableClass from '/@/utils/baTable'
import { aREA } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { useRoute } from 'vue-router'



const props = defineProps({
    companyName:String,
    formOperate:String
})
const route = useRoute()
const type = route.path === '/admin/corplib/customer'? 1:route.path === '/admin/corplib/supplier'||route.path === '/admin/corplib/supplier/approve'?2:null

// 是否是供应商管理里的堆场门点管理
const isYard = computed(()=>{
    return route.name === 'aREAYard'
})

const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(["edit","delete"])
const baTable = new baTableClass(
    new baTableApi(aREA),
    {
        pk: 'ID',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('aREA.CORP'), prop: 'CORP', align: 'center' },
            {
                label: t('aREA.areatype'),
                prop: 'areatype',
                align: 'center',
                render: 'tag',
                custom: { '1': '客户工厂', '2': '堆场' },
                replaceValue: { '1': t('客户工厂'), '2': t('堆场') },
                operator: !isYard.value
            },
            { label: t('aREA.PORT'), prop: 'PORT', align: 'center',operator:false },

            { label: t('aREA.REMIND'), prop: 'REMIND', align: 'center' },
            { label: t('aREA.AREA'), prop: 'AREA', align: 'center' ,show:false},
            { label: t('aREA.AREANAME'), prop: 'AREANAME', align: 'center' ,show:false},
            // { label: t('aREA.fax'), prop: 'fax', align: 'center' },
            { label: t('aREA.linkman'), prop: 'linkman', align: 'center' },
            { label: t('aREA.tel'), prop: 'tel', align: 'center' },
            // { label: t('aREA.REMARK'), prop: 'REMARK', align: 'center' },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false,show:props.formOperate !=='view' },
        ],
        dblClickNotEditColumn: [undefined, ],
        defaultOrder: { prop: 'AREA', order: 'desc' },
    },
    {
        defaultItems: [],
    }
)

provide('baTable', baTable)


onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    if(type){
        baTable.table.filter!.type = type
        baTable.table.filter!.CORP = props.companyName
    }
    if(isYard.value){
        baTable.table.filter = {
            search:[
                {
                    'field': 'areatype',
                    'val': '2',
                    'operator': '=',
                    'render': 'tags',
                }
            ]
        }
    }
    // baTable.comSearch.form.CORP = props.companyName

    if(props.formOperate!=='add'){
        baTable.getIndex()?.then(() => {
            baTable.initSort()
            baTable.dragSort()
        })
    }
})
</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'aREA',
})
</script>

<style scoped lang="scss"></style>
